import { useCallback } from 'react'
import { RadioGroup, FormControlLabel, Radio } from '@mui/material';
import propTypes from 'prop-types'

const MyRadio = ({ field, radioList, setFieldValue }) => {

  const changeRadio = useCallback((event) => {
    if (event.target.value !== field.value) {
      setFieldValue(field.name, event.target.value)
    }
  }, [setFieldValue, field])

  return (
    <RadioGroup
      value={field.value}
      onChange={(event) => changeRadio(event)}
    >
      {
        radioList.map(item => (
          <FormControlLabel value={item.value} control={<Radio />} label={item.label} key={item.value}/>
        ))
      }
    </RadioGroup>
  )
}

MyRadio.propTypes = {
  field: propTypes.object.isRequired,
  radioList: propTypes.array.isRequired,
  setFieldValue: propTypes.func.isRequired
}

export default MyRadio